{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>{% block title %}Smartshop - eCommerce Bootstrap 5 HTML5 Template.{% endblock %}</title>
    <link rel="icon" type="image/png" href="{% static "assets/img/favicon.png" %}">
    <link href="https://fonts.googleapis.com/css?family=Poppins:200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&amp;display=swap" rel="stylesheet">


<link rel="stylesheet" href="{% static 'assets/css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'assets/css/magnific-popup.min.css' %}">
<link rel="stylesheet" href="{% static 'assets/css/fontawesome.min.css' %}">
<link rel="stylesheet" href="{% static 'assets/css/jquery.fancybox.min.css' %}">
<link rel="stylesheet" href="{% static 'assets/css/jquery-ui.css' %}">
<link rel="stylesheet" href="{% static 'assets/css/themify-icons.css' %}">
<link rel="stylesheet" href="{% static 'assets/css/flaticon.css' %}">
<link rel="stylesheet" href="{% static 'assets/css/niceselect.css' %}">
<link rel="stylesheet" href="{% static 'assets/css/animate.css' %}">
<link rel="stylesheet" href="{% static 'assets/css/flex-slider.min.css' %}">
<link rel="stylesheet" href="{% static 'assets/css/owl-carousel.css' %}">
<link rel="stylesheet" href="{% static 'assets/css/slicknav.min.css' %}">
<link rel="stylesheet" href="{% static 'assets/css/default.css' %}">
<link rel="stylesheet" href="{% static 'assets/css/style.css' %}">
<link rel="stylesheet" href="{% static 'assets/css/responsive.css' %}">

</head>
<body>
    <!--<div class="preloader">
        <div class="preloader-inner">
            <div class="preloader-icon">
                <span></span>
                <span></span>
            </div>
        </div>
    </div>-->
{% block header %}
    <header class="header shop">

        <div class="topbar">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 col-md-12 col-12">

                        <div class="top-left">
                            <ul class="list-main">
                                <li><i class="ti-headphone-alt"></i> +86 15837204509</li>
                                <li><i class="ti-email"></i> 20377277@buaa.edu.cn</li>
                            </ul>
                        </div>

                    </div>
                    <div class="col-lg-6 col-md-12 col-12">

                        <div class="right-content">
                            <ul class="list-main">
                                <li><i class="ti-user"></i> <a href="{% url 'task_market:user_mng:self' %}" target="_blank">My account</a></li>
                                {% if staues == 'login' %}
                                    <li><i class="ti-power-off"></i><a href="{% url 'task_market:user_mng:log' %}">Login</a></li>
                                    <li><i class="ti-settings"></i><a href="{% url 'task_market:user_mng:signup' %}">Register</a></li>
                                {% else %}
                                    <li><i class="ti-power-off"></i><a href="{% url 'task_market:user_mng:log' %}">Logout</a></li>
                                {% endif %}
                                </li>
                            </ul>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <div class="middle-inner">
            <div class="container">
                <div class="row">
                    <div class="col-lg-3 col-md-3 col-12">

                        <div class="logo">
                            <a href="{% url 'task_market:index' %}"><img src="{% static 'temp_shop/assets/img/logo.png' %}" alt="logo"></a>
                        </div>


                        <div class="search-top">
                            <div class="top-search"><a href="#0"><i class="far fa-search"></i></a></div>

                            <div class="search-top">
                                <form class="search-form">
                                    <input type="text" placeholder="Search here..." name="search">
                                    <button value="search" type="submit"><i class="far fa-search"></i></button>
                                </form>
                            </div>

                        </div>

                        <div class="mobile-nav"></div>
                    </div>
                    <div class="col-lg-7 col-md-6 col-12">
                        <div class="search-bar-top">
                            <div class="search-bar">
                                <form>
                                    {% csrf_token %}
                                    <input name="search" placeholder="Search Here" type="search">
                                    <button class="btnn"><i class="far fa-search"></i></button>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-2 col-md-3 col-12">
                        <div class="right-bar">
                            <div class="sinlge-bar">
                                <a class="single-icon"><i class="fal fa-user-circle" aria-hidden="true"></i></a>
                                <a href="{% url 'task_market:user_mng:login' %}" class="single-icon" style="font-size: 16px;"><span> 欢迎您, {{ name }}</span></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="header-inner  shadow">
            <div class="container">
                <div class="cat-nav-head">
                    <div class="row">
                        <div class="col-lg-3">
                            <div class="all-category">
                                <div class="d-flex">
                                    <i class="flaticon-menu cat-heading-icon"></i>
                                    <a href="{% url 'task_market:index' %}"><h3 class="cat-heading">数据标注众包平台</h3></a>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-9 col-12">
                            <div class="menu-area">

                                <nav class="navbar navbar-expand-lg">
                                    <div class="navbar-collapse">
                                        <div class="nav-inner">
                                            <ul class="nav main-menu menu navbar-nav">
                                                <li><a href="{% url 'task_market:index' %}">Home</a></li>
                                                <li><a href="{% url 'task_market:user_mng:self' %}" target="_blank">Space</a></li>
                                                <li><a href="#">Task</a>
                                                    <ul class="dropdown">
                                                        <li><a href="{% url 'task_market:all_grid' %}" target="_blank">Task Grid</a></li>
                                                        <li><a href="{% url 'task_market:all_list' %}" target="_blank">Task List</a></li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </nav>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </header>
{% endblock %}

{% block content %}
    <section class="hero-slider bg-grey">
        <div class="container">
            <div class="main-hero-slider owl-carousel owl-theme">
                <div class="item">
                    <div class="single-slider item">
                        <div class="row">
                            <div class="col-lg-6 col-md-8 offset-lg-3 my-auto">
                                <div class="text-inner">
                                    <div class="hero-text">
                                        <h1><span>UP TO 50% OFF </span>For Your First Buy</h1>
                                        <p>There are many variations of passages of lorem ipsum <br> available but the majority have suffered alteration in <br> some form by injected humour.</p>
                                        <div class="button">
                                            <a href="#" class="btn">Shop Now!</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-4 my-auto">
                                <img src="assets/img/slider/slider.png" class="w-100" alt="">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="item">
                    <div class="single-slider item">
                        <div class="row">
                            <div class="col-lg-6 col-md-8 offset-lg-3 my-auto">
                                <div class="text-inner">
                                    <div class="hero-text">
                                        <h1><span>UP TO 50% OFF </span>For Your First Buy</h1>
                                        <p>There are many variations of passages of lorem ipsum <br> available but the majority have suffered alteration in <br> some form by injected humour.</p>
                                        <div class="button">
                                            <a href="#" class="btn">Shop Now!</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-4 my-auto">
                                <img src="assets/img/slider/slider.png" class="w-100" alt="">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="item">
                    <div class="single-slider item">
                        <div class="row">
                            <div class="col-lg-6 col-md-8 offset-lg-3 my-auto">
                                <div class="text-inner">
                                    <div class="hero-text">
                                        <h1><span>UP TO 50% OFF </span>For Your First Buy</h1>
                                        <p>There are many variations of passages of lorem ipsum <br> available but the majority have suffered alteration in <br> some form by injected humour.</p>
                                        <div class="button">
                                            <a href="#" class="btn">Shop Now!</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-4 my-auto">
                                <img src="assets/img/slider/slider.png" class="w-100" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="small-banner section">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 col-md-6 col-12">
                    <div class="single-banner">
                        <img src="assets/img/mini-banner1.jpg" alt="#">
                        <div class="content">
                            <p>Hot Collections</p>
                            <h3>Best travel sale<br> collection</h3>
                            <a href="#">Discover Now</a>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 col-md-6 col-12">
                    <div class="single-banner">
                        <img src="assets/img/mini-banner2.jpg" alt="#">
                        <div class="content">
                            <p>Bag Collections</p>
                            <h3>Awesome Bag <br> Collecton</h3>
                            <a href="#">Shop Now</a>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 col-12">
                    <div class="single-banner tab-height">
                        <img src="assets/img/mini-banner3.jpg" alt="#">
                        <div class="content">
                            <p>Flash Sale</p>
                            <h3>Summer Season <br> Up to <span>50%</span> Off</h3>
                            <a href="#">Discover Now</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="product-area section">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="section-title d-flex justify-content-between align-center">
                        <div class="d-flex section-title-left">
                            <i class="flaticon-tags"></i>
                            <h2>Trending Item</h2>
                        </div>
                        <div class="section-title-right">
                            <a href="#">View More <i class="far fa-long-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="product-slider owl-carousel owl-theme">
                <div class="item">
                    <div class="single-product">
                        <div class="product-img">
                            <a href="../shop-single.html">
                                <img class="product-img" src="assets/img/products/p1.png" alt="#">
                                <span class="new">New</span>
                            </a>
                            <div class="button-head">
                                <div class="product-action">
                                    <a data-bs-toggle="modal" data-bs-target="#staticBackdrop" href="#"><i class="far fa-eye"></i><span>Quick Shop</span></a>
                                    <a href="#"><i class="far fa-heart"></i><span>Add to Wishlist</span></a>
                                    <a href="#"><i class="far fa-exchange"></i><span>Add to Compare</span></a>
                                </div>
                            </div>
                        </div>
                        <div class="product-content">
                            <h3><a href="../shop-single.html">Xbeats Bluetooth Earphones</a></h3>
                            <div class="product-rate">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                            </div>
                            <div class="d-flex justify-content-between">
                                <div class="product-price">
                                    <span class="old">$150.00</span>
                                    <span>$100.00</span>
                                </div>
                                <button class="product-cart-btn" type="button"><i class="fal fa-shopping-cart"></i></button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="item">
                    <div class="single-product">
                        <div class="product-img">
                            <a href="../shop-single.html">
                                <img class="product-img" src="assets/img/products/p2.png" alt="#">
                                <span class="out-of-stock">Hot</span>
                            </a>
                            <div class="button-head">
                                <div class="product-action">
                                    <a data-bs-toggle="modal" data-bs-target="#staticBackdrop" href="#"><i class="far fa-eye"></i><span>Quick Shop</span></a>
                                    <a href="#"><i class="far fa-heart"></i><span>Add to Wishlist</span></a>
                                    <a href="#"><i class="far fa-exchange"></i><span>Add to Compare</span></a>
                                </div>
                            </div>
                        </div>
                        <div class="product-content">
                            <h3><a href="../shop-single.html">Wireless Earphones</a></h3>
                            <div class="product-rate">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                            </div>
                            <div class="d-flex justify-content-between">
                                <div class="product-price">
                                    <span>$100.00</span>
                                </div>
                                <button class="product-cart-btn" type="button"><i class="fal fa-shopping-cart"></i></button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="item">
                    <div class="single-product">
                        <div class="product-img">
                            <a href="../shop-single.html">
                                <img class="product-img" src="assets/img/products/p3.png" alt="#">
                                <span class="new">New</span>
                            </a>
                            <div class="button-head">
                                <div class="product-action">
                                    <a data-bs-toggle="modal" data-bs-target="#staticBackdrop" href="#"><i class="far fa-eye"></i><span>Quick Shop</span></a>
                                    <a href="#"><i class="far fa-heart"></i><span>Add to Wishlist</span></a>
                                    <a href="#"><i class="far fa-exchange"></i><span>Add to Compare</span></a>
                                </div>
                            </div>
                        </div>
                        <div class="product-content">
                            <h3><a href="../shop-single.html">Apple Earphones</a></h3>
                            <div class="product-rate">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                            </div>
                            <div class="d-flex justify-content-between">
                                <div class="product-price">
                                    <span>$100.00</span>
                                </div>
                                <button class="product-cart-btn" type="button"><i class="fal fa-shopping-cart"></i></button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="item">
                    <div class="single-product">
                        <div class="product-img">
                            <a href="../shop-single.html">
                                <img class="product-img" src="assets/img/products/p4.png" alt="#">
                                <span class="price-dec">30% Off</span>
                            </a>
                            <div class="button-head">
                                <div class="product-action">
                                    <a data-bs-toggle="modal" data-bs-target="#staticBackdrop" href="#"><i class="far fa-eye"></i><span>Quick Shop</span></a>
                                    <a href="#"><i class="far fa-heart"></i><span>Add to Wishlist</span></a>
                                    <a href="#"><i class="far fa-exchange"></i><span>Add to Compare</span></a>
                                </div>
                            </div>
                        </div>
                        <div class="product-content">
                            <h3><a href="../shop-single.html">Andriod Mobile Phone</a></h3>
                            <div class="product-rate">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                            </div>
                            <div class="d-flex justify-content-between">
                                <div class="product-price">
                                    <span>$100.00</span>
                                </div>
                                <button class="product-cart-btn" type="button"><i class="fal fa-shopping-cart"></i></button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="item">
                    <div class="single-product">
                        <div class="product-img">
                            <a href="../shop-single.html">
                                <img class="product-img" src="assets/img/products/p5.png" alt="#">
                            </a>
                            <div class="button-head">
                                <div class="product-action">
                                    <a data-bs-toggle="modal" data-bs-target="#staticBackdrop" href="#"><i class="far fa-eye"></i><span>Quick Shop</span></a>
                                    <a href="#"><i class="far fa-heart"></i><span>Add to Wishlist</span></a>
                                    <a href="#"><i class="far fa-exchange"></i><span>Add to Compare</span></a>
                                </div>
                            </div>
                        </div>
                        <div class="product-content">
                            <h3><a href="../shop-single.html">Apple Phone</a></h3>
                            <div class="product-rate">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                            </div>
                            <div class="d-flex justify-content-between">
                                <div class="product-price">
                                    <span>$100.00</span>
                                </div>
                                <button class="product-cart-btn" type="button"><i class="fal fa-shopping-cart"></i></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <section class="midium-banner">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-12">
                    <div class="single-banner">
                        <img src="assets/img/mid-banner1.jpg" alt="#">
                        <div class="content">
                            <p>Top Collectons</p>
                            <h3>Women's Shirt <br>Up to<span> 50%</span></h3>
                            <a href="#">Shop Now</a>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6 col-md-6 col-12">
                    <div class="single-banner">
                        <img src="assets/img/mid-banner2.jpg" alt="#">
                        <div class="content">
                            <p>women shoes</p>
                            <h3>summer Collectons <br> up to <span>30%</span></h3>
                            <a href="#" class="btn">Shop Now</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="product-area section">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="section-title d-flex justify-content-between align-center">
                        <div class="d-flex section-title-left">
                            <i class="flaticon-hot-deal"></i>
                            <h2>Hot Item</h2>
                        </div>
                        <div class="section-title-right">
                            <a href="#">View More <i class="far fa-long-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="product-slider owl-carousel owl-theme">
                <div class="item">
                    <div class="single-product">
                        <div class="product-img">
                            <a href="../shop-single.html">
                                <img class="product-img" src="assets/img/products/p8.png" alt="#">
                                <span class="out-of-stock">Hot</span>
                            </a>
                            <div class="button-head">
                                <div class="product-action">
                                    <a data-bs-toggle="modal" data-bs-target="#staticBackdrop" href="#"><i class="far fa-eye"></i><span>Quick Shop</span></a>
                                    <a href="#"><i class="far fa-heart"></i><span>Add to Wishlist</span></a>
                                    <a href="#"><i class="far fa-exchange"></i><span>Add to Compare</span></a>
                                </div>
                            </div>
                        </div>
                        <div class="product-content">
                            <h3><a href="../shop-single.html">Electric Car 2021</a></h3>
                            <div class="product-rate">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                            </div>
                            <div class="d-flex justify-content-between">
                                <div class="product-price">
                                    <span>$100.00</span>
                                </div>
                                <button class="product-cart-btn" type="button"><i class="fal fa-shopping-cart"></i></button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="item">
                    <div class="single-product">
                        <div class="product-img">
                            <a href="../shop-single.html">
                                <img class="product-img" src="assets/img/products/p9.png" alt="#">
                                <span class="new">New</span>
                            </a>
                            <div class="button-head">
                                <div class="product-action">
                                    <a data-bs-toggle="modal" data-bs-target="#staticBackdrop" href="#"><i class="far fa-eye"></i><span>Quick Shop</span></a>
                                    <a href="#"><i class="far fa-heart"></i><span>Add to Wishlist</span></a>
                                    <a href="#"><i class="far fa-exchange"></i><span>Add to Compare</span></a>
                                </div>
                            </div>
                        </div>
                        <div class="product-content">
                            <h3><a href="../shop-single.html">Red Car 2021</a></h3>
                            <div class="product-rate">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                            </div>
                            <div class="d-flex justify-content-between">
                                <div class="product-price">
                                    <span>$100.00</span>
                                </div>
                                <button class="product-cart-btn" type="button"><i class="fal fa-shopping-cart"></i></button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="item">
                    <div class="single-product">
                        <div class="product-img">
                            <a href="../shop-single.html">
                                <img class="product-img" src="assets/img/products/p10.png" alt="#">
                                <span class="price-dec">30% Off</span>
                            </a>
                            <div class="button-head">
                                <div class="product-action">
                                    <a data-bs-toggle="modal" data-bs-target="#staticBackdrop" href="#"><i class="far fa-eye"></i><span>Quick Shop</span></a>
                                    <a href="#"><i class="far fa-heart"></i><span>Add to Wishlist</span></a>
                                    <a href="#"><i class="far fa-exchange"></i><span>Add to Compare</span></a>
                                </div>
                            </div>
                        </div>
                        <div class="product-content">
                            <h3><a href="../shop-single.html">Yeallow Car 2021</a></h3>
                            <div class="product-rate">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                            </div>
                            <div class="d-flex justify-content-between">
                                <div class="product-price">
                                    <span>$100.00</span>
                                </div>
                                <button class="product-cart-btn" type="button"><i class="fal fa-shopping-cart"></i></button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="item">
                    <div class="single-product">
                        <div class="product-img">
                            <a href="../shop-single.html">
                                <img class="product-img" src="assets/img/products/p11.png" alt="#">
                                <span class="price-dec">30% Off</span>
                            </a>
                            <div class="button-head">
                                <div class="product-action">
                                    <a data-bs-toggle="modal" data-bs-target="#staticBackdrop" href="#"><i class="far fa-eye"></i><span>Quick Shop</span></a>
                                    <a href="#"><i class="far fa-heart"></i><span>Add to Wishlist</span></a>
                                    <a href="#"><i class="far fa-exchange"></i><span>Add to Compare</span></a>
                                </div>
                            </div>
                        </div>
                        <div class="product-content">
                            <h3><a href="../shop-single.html">Black Camera</a></h3>
                            <div class="product-rate">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                            </div>
                            <div class="d-flex justify-content-between">
                                <div class="product-price">
                                    <span>$100.00</span>
                                </div>
                                <button class="product-cart-btn" type="button"><i class="fal fa-shopping-cart"></i></button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="item">
                    <div class="single-product">
                        <div class="product-img">
                            <a href="../shop-single.html">
                                <img class="product-img" src="assets/img/products/p7.png" alt="#">
                                <span class="new">New</span>
                            </a>
                            <div class="button-head">
                                <div class="product-action">
                                    <a data-bs-toggle="modal" data-bs-target="#staticBackdrop" href="#"><i class="far fa-eye"></i><span>Quick Shop</span></a>
                                    <a href="#"><i class="far fa-heart"></i><span>Add to Wishlist</span></a>
                                    <a href="#"><i class="far fa-exchange"></i><span>Add to Compare</span></a>
                                </div>
                            </div>
                        </div>
                        <div class="product-content">
                            <h3><a href="../shop-single.html">Silver Cap</a></h3>
                            <div class="product-rate">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                            </div>
                            <div class="d-flex justify-content-between">
                                <div class="product-price">
                                    <span class="old">$150.00</span>
                                    <span>$100.00</span>
                                </div>
                                <button class="product-cart-btn" type="button"><i class="fal fa-shopping-cart"></i></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="product-area section pt-0">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="section-title d-flex justify-content-between align-center">
                        <div class="d-flex section-title-left">
                            <i class="flaticon-new-2"></i>
                            <h2>New Arrival Item</h2>
                        </div>
                        <div class="section-title-right">
                            <a href="#">View More <i class="far fa-long-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="product-slider owl-carousel owl-theme">
                <div class="item">
                    <div class="single-product">
                        <div class="product-img">
                            <a href="../shop-single.html">
                                <img class="product-img" src="assets/img/products/p14.png" alt="#">
                                <span class="new">New</span>
                            </a>
                            <div class="button-head">
                                <div class="product-action">
                                    <a data-bs-toggle="modal" data-bs-target="#staticBackdrop" href="#"><i class="far fa-eye"></i><span>Quick Shop</span></a>
                                    <a href="#"><i class="far fa-heart"></i><span>Add to Wishlist</span></a>
                                    <a href="#"><i class="far fa-exchange"></i><span>Add to Compare</span></a>
                                </div>
                            </div>
                        </div>
                        <div class="product-content">
                            <h3><a href="../shop-single.html">Wireless Charger </a></h3>
                            <div class="product-rate">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                            </div>
                            <div class="d-flex justify-content-between">
                                <div class="product-price">
                                    <span>$100.00</span>
                                </div>
                                <button class="product-cart-btn" type="button"><i class="fal fa-shopping-cart"></i></button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="item">
                    <div class="single-product">
                        <div class="product-img">
                            <a href="../shop-single.html">
                                <img class="product-img" src="assets/img/products/p16.png" alt="#">
                                <span class="new">New</span>
                            </a>
                            <div class="button-head">
                                <div class="product-action">
                                    <a data-bs-toggle="modal" data-bs-target="#staticBackdrop" href="#"><i class="far fa-eye"></i><span>Quick Shop</span></a>
                                    <a href="#"><i class="far fa-heart"></i><span>Add to Wishlist</span></a>
                                    <a href="#"><i class="far fa-exchange"></i><span>Add to Compare</span></a>
                                </div>
                            </div>
                        </div>
                        <div class="product-content">
                            <h3><a href="../shop-single.html">Corsor One</a></h3>
                            <div class="product-rate">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                            </div>
                            <div class="d-flex justify-content-between">
                                <div class="product-price">
                                    <span>$100.00</span>
                                </div>
                                <button class="product-cart-btn" type="button"><i class="fal fa-shopping-cart"></i></button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="item">
                    <div class="single-product">
                        <div class="product-img">
                            <a href="../shop-single.html">
                                <img class="product-img" src="assets/img/products/p17.png" alt="#">
                                <span class="new">New</span>
                            </a>
                            <div class="button-head">
                                <div class="product-action">
                                    <a data-bs-toggle="modal" data-bs-target="#staticBackdrop" href="#"><i class="far fa-eye"></i><span>Quick Shop</span></a>
                                    <a href="#"><i class="far fa-heart"></i><span>Add to Wishlist</span></a>
                                    <a href="#"><i class="far fa-exchange"></i><span>Add to Compare</span></a>
                                </div>
                            </div>
                        </div>
                        <div class="product-content">
                            <h3><a href="../shop-single.html">Latest Siri </a></h3>
                            <div class="product-rate">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                            </div>
                            <div class="d-flex justify-content-between">
                                <div class="product-price">
                                    <span>$100.00</span>
                                </div>
                                <button class="product-cart-btn" type="button"><i class="fal fa-shopping-cart"></i></button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="item">
                    <div class="single-product">
                        <div class="product-img">
                            <a href="../shop-single.html">
                                <img class="product-img" src="assets/img/products/p18.png" alt="#">
                                <span class="new">New</span>
                            </a>
                            <div class="button-head">
                                <div class="product-action">
                                    <a data-bs-toggle="modal" data-bs-target="#staticBackdrop" href="#"><i class="far fa-eye"></i><span>Quick Shop</span></a>
                                    <a href="#"><i class="far fa-heart"></i><span>Add to Wishlist</span></a>
                                    <a href="#"><i class="far fa-exchange"></i><span>Add to Compare</span></a>
                                </div>
                            </div>
                        </div>
                        <div class="product-content">
                            <h3><a href="../shop-single.html">Jackson Bike</a></h3>
                            <div class="product-rate">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                            </div>
                            <div class="d-flex justify-content-between">
                                <div class="product-price">
                                    <span>$100.00</span>
                                </div>
                                <button class="product-cart-btn" type="button"><i class="fal fa-shopping-cart"></i></button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="item">
                    <div class="single-product">
                        <div class="product-img">
                            <a href="../shop-single.html">
                                <img class="product-img" src="assets/img/products/p13.png" alt="#">
                                <span class="new">New</span>
                            </a>
                            <div class="button-head">
                                <div class="product-action">
                                    <a data-bs-toggle="modal" data-bs-target="#staticBackdrop" href="#"><i class="far fa-eye"></i><span>Quick Shop</span></a>
                                    <a href="#"><i class="far fa-heart"></i><span>Add to Wishlist</span></a>
                                    <a href="#"><i class="far fa-exchange"></i><span>Add to Compare</span></a>
                                </div>
                            </div>
                        </div>
                        <div class="product-content">
                            <h3><a href="../shop-single.html">Black Camera</a></h3>
                            <div class="product-rate">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                            </div>
                            <div class="d-flex justify-content-between">
                                <div class="product-price">
                                    <span class="old">$60.00</span>
                                    <span>$100.00</span>
                                </div>
                                <button class="product-cart-btn" type="button"><i class="fal fa-shopping-cart"></i></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="product-area section pt-0">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="section-title d-flex justify-content-between align-center">
                        <div class="d-flex section-title-left">
                            <i class="flaticon-tag"></i>
                            <h2>Big Discount Item</h2>
                        </div>
                        <div class="section-title-right">
                            <a href="#">View More <i class="far fa-long-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="product-slider owl-carousel owl-theme">
                <div class="item">
                    <div class="single-product">
                        <div class="product-img">
                            <a href="../shop-single.html">
                                <img class="product-img" src="assets/img/products/p20.png" alt="#">
                                <span class="new">New</span>
                            </a>
                            <div class="button-head">
                                <div class="product-action">
                                    <a data-bs-toggle="modal" data-bs-target="#staticBackdrop" href="#"><i class="far fa-eye"></i><span>Quick Shop</span></a>
                                    <a href="#"><i class="far fa-heart"></i><span>Add to Wishlist</span></a>
                                    <a href="#"><i class="far fa-exchange"></i><span>Add to Compare</span></a>
                                </div>
                            </div>
                        </div>
                        <div class="product-content">
                            <h3><a href="../shop-single.html">Electric Bike</a></h3>
                            <div class="product-rate">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                            </div>
                            <div class="d-flex justify-content-between">
                                <div class="product-price">
                                    <span class="old">$60.00</span>
                                    <span>$100.00</span>
                                </div>
                                <button class="product-cart-btn" type="button"><i class="fal fa-shopping-cart"></i></button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="item">
                    <div class="single-product">
                        <div class="product-img">
                            <a href="../shop-single.html">
                                <img class="product-img" src="assets/img/products/p21.png" alt="#">
                                <span class="out-of-stock">Hot</span>
                            </a>
                            <div class="button-head">
                                <div class="product-action">
                                    <a data-bs-toggle="modal" data-bs-target="#staticBackdrop" href="#"><i class="far fa-eye"></i><span>Quick Shop</span></a>
                                    <a href="#"><i class="far fa-heart"></i><span>Add to Wishlist</span></a>
                                    <a href="#"><i class="far fa-exchange"></i><span>Add to Compare</span></a>
                                </div>
                            </div>
                        </div>
                        <div class="product-content">
                            <h3><a href="../shop-single.html">Black Bike</a></h3>
                            <div class="product-rate">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                            </div>
                            <div class="d-flex justify-content-between">
                                <div class="product-price">
                                    <span>$100.00</span>
                                </div>
                                <button class="product-cart-btn" type="button"><i class="fal fa-shopping-cart"></i></button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="item">
                    <div class="single-product">
                        <div class="product-img">
                            <a href="../shop-single.html">
                                <img class="product-img" src="assets/img/products/p22.png" alt="#">
                                <span class="new">New</span>
                            </a>
                            <div class="button-head">
                                <div class="product-action">
                                    <a data-bs-toggle="modal" data-bs-target="#staticBackdrop" href="#"><i class="far fa-eye"></i><span>Quick Shop</span></a>
                                    <a href="#"><i class="far fa-heart"></i><span>Add to Wishlist</span></a>
                                    <a href="#"><i class="far fa-exchange"></i><span>Add to Compare</span></a>
                                </div>
                            </div>
                        </div>
                        <div class="product-content">
                            <h3><a href="../shop-single.html">Blue Bike 2021</a></h3>
                            <div class="product-rate">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                            </div>
                            <div class="d-flex justify-content-between">
                                <div class="product-price">
                                    <span>$100.00</span>
                                </div>
                                <button class="product-cart-btn" type="button"><i class="fal fa-shopping-cart"></i></button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="item">
                    <div class="single-product">
                        <div class="product-img">
                            <a href="../shop-single.html">
                                <img class="product-img" src="assets/img/products/p23.png" alt="#">
                            </a>
                            <div class="button-head">
                                <div class="product-action">
                                    <a data-bs-toggle="modal" data-bs-target="#staticBackdrop" href="#"><i class="far fa-eye"></i><span>Quick Shop</span></a>
                                    <a href="#"><i class="far fa-heart"></i><span>Add to Wishlist</span></a>
                                    <a href="#"><i class="far fa-exchange"></i><span>Add to Compare</span></a>
                                </div>
                            </div>
                        </div>
                        <div class="product-content">
                            <h3><a href="../shop-single.html">Black Watch</a></h3>
                            <div class="product-rate">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                            </div>
                            <div class="d-flex justify-content-between">
                                <div class="product-price">
                                    <span>$100.00</span>
                                </div>
                                <button class="product-cart-btn" type="button"><i class="fal fa-shopping-cart"></i></button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="item">
                    <div class="single-product">
                        <div class="product-img">
                            <a href="../shop-single.html">
                                <img class="product-img" src="assets/img/products/p24.png" alt="#">
                                <span class="price-dec">30% Off</span>
                            </a>
                            <div class="button-head">
                                <div class="product-action">
                                    <a data-bs-toggle="modal" data-bs-target="#staticBackdrop" href="#"><i class="far fa-eye"></i><span>Quick Shop</span></a>
                                    <a href="#"><i class="far fa-heart"></i><span>Add to Wishlist</span></a>
                                    <a href="#"><i class="far fa-exchange"></i><span>Add to Compare</span></a>
                                </div>
                            </div>
                        </div>
                        <div class="product-content">
                            <h3><a href="../shop-single.html">Wireless Earphone Collection</a></h3>
                            <div class="product-rate">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                            </div>
                            <div class="d-flex justify-content-between">
                                <div class="product-price">
                                    <span>$100.00</span>
                                </div>
                                <button class="product-cart-btn" type="button"><i class="fal fa-shopping-cart"></i></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="product-area section pt-0">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 mb-5">
                    <div class="product-brand">
                        <h5>Phone Brands</h5>
                        <div class="brand-list">
                            <a href="#"> <i class="flaticon-mozy"></i> SAMSUNG</a>
                            <a href="#"> <i class="flaticon-mozy"></i> APPLE</a>
                            <a href="#"> <i class="flaticon-mozy"></i> NOKIA</a>
                            <a href="#"> <i class="flaticon-mozy"></i> SONY</a>
                            <a href="#"> <i class="flaticon-mozy"></i> GOOGLE</a>
                            <a href="#"> <i class="flaticon-mozy"></i> MICROSOFT</a>
                        </div>
                        <a href="#" class="show-brand-btn">View All Brands <i class="far fa-long-arrow-right"></i></a>
                    </div>
                </div>
                <div class="col-lg-9">
                    <div class="row">
                        <div class="col-12">
                            <div class="section-title d-flex justify-content-between align-center">
                                <div class="d-flex section-title-left">
                                    <i class="flaticon-list-text"></i>
                                    <h2>Mobile Phones</h2>
                                </div>
                                <div class="section-title-right">
                                    <a href="#">View More <i class="far fa-long-arrow-right"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-4 col-md-6 mb-4">
                            <div class="single-product">
                                <div class="product-img">
                                    <a href="../shop-single.html">
                                        <img class="product-img" src="assets/img/products/p4.png" alt="#">
                                        <span class="out-of-stock">Out Of Stock</span>
                                    </a>
                                    <div class="button-head">
                                        <div class="product-action">
                                            <a data-bs-toggle="modal" data-bs-target="#staticBackdrop" href="#"><i class="far fa-eye"></i><span>Quick Shop</span></a>
                                            <a href="#"><i class="far fa-heart"></i><span>Add to Wishlist</span></a>
                                            <a href="#"><i class="far fa-exchange"></i><span>Add to Compare</span></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="product-content">
                                    <h3><a href="../shop-single.html">Andriod Phone</a></h3>
                                    <div class="product-rate">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="far fa-star"></i>
                                    </div>
                                    <div class="d-flex justify-content-between">
                                        <div class="product-price">
                                            <span class="old">$60.00</span>
                                            <span>$100.00</span>
                                        </div>
                                        <button class="product-cart-btn" type="button"><i class="fal fa-shopping-cart"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-4 col-md-6 mb-4">
                            <div class="single-product">
                                <div class="product-img">
                                    <a href="../shop-single.html">
                                        <img class="product-img" src="assets/img/products/p5.png" alt="#">
                                    </a>
                                    <div class="button-head">
                                        <div class="product-action">
                                            <a data-bs-toggle="modal" data-bs-target="#staticBackdrop" href="#"><i class="far fa-eye"></i><span>Quick Shop</span></a>
                                            <a href="#"><i class="far fa-heart"></i><span>Add to Wishlist</span></a>
                                            <a href="#"><i class="far fa-exchange"></i><span>Add to Compare</span></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="product-content">
                                    <h3><a href="../shop-single.html">Apple Phone</a></h3>
                                    <div class="product-rate">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="far fa-star"></i>
                                    </div>
                                    <div class="d-flex justify-content-between">
                                        <div class="product-price">
                                            <span class="old">$60.00</span>
                                            <span>$100.00</span>
                                        </div>
                                        <button class="product-cart-btn" type="button"><i class="fal fa-shopping-cart"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-4 col-md-6 mb-4">
                            <div class="single-product">
                                <div class="product-img">
                                    <a href="../shop-single.html">
                                        <img class="product-img" src="assets/img/products/p35.png" alt="#">
                                    </a>
                                    <div class="button-head">
                                        <div class="product-action">
                                            <a data-bs-toggle="modal" data-bs-target="#staticBackdrop" href="#"><i class="far fa-eye"></i><span>Quick Shop</span></a>
                                            <a href="#"><i class="far fa-heart"></i><span>Add to Wishlist</span></a>
                                            <a href="#"><i class="far fa-exchange"></i><span>Add to Compare</span></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="product-content">
                                    <h3><a href="../shop-single.html">Black Phone</a></h3>
                                    <div class="product-rate">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="far fa-star"></i>
                                    </div>
                                    <div class="d-flex justify-content-between">
                                        <div class="product-price">
                                            <span class="old">$60.00</span>
                                            <span>$100.00</span>
                                        </div>
                                        <button class="product-cart-btn" type="button"><i class="fal fa-shopping-cart"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-4 col-md-6 mb-4">
                            <div class="single-product">
                                <div class="product-img">
                                    <a href="../shop-single.html">
                                        <img class="product-img" src="assets/img/products/p2.png" alt="#">
                                    </a>
                                    <div class="button-head">
                                        <div class="product-action">
                                            <a data-bs-toggle="modal" data-bs-target="#staticBackdrop" href="#"><i class="far fa-eye"></i><span>Quick Shop</span></a>
                                            <a href="#"><i class="far fa-heart"></i><span>Add to Wishlist</span></a>
                                            <a href="#"><i class="far fa-exchange"></i><span>Add to Compare</span></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="product-content">
                                    <h3><a href="../shop-single.html">White Earphone</a></h3>
                                    <div class="product-rate">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="far fa-star"></i>
                                    </div>
                                    <div class="d-flex justify-content-between">
                                        <div class="product-price">
                                            <span class="old">$60.00</span>
                                            <span>$100.00</span>
                                        </div>
                                        <button class="product-cart-btn" type="button"><i class="fal fa-shopping-cart"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-4 col-md-6 mb-4">
                            <div class="single-product">
                                <div class="product-img">
                                    <a href="../shop-single.html">
                                        <img class="product-img" src="assets/img/products/p3.png" alt="#">
                                    </a>
                                    <div class="button-head">
                                        <div class="product-action">
                                            <a data-bs-toggle="modal" data-bs-target="#staticBackdrop" href="#"><i class="far fa-eye"></i><span>Quick Shop</span></a>
                                            <a href="#"><i class="far fa-heart"></i><span>Add to Wishlist</span></a>
                                            <a href="#"><i class="far fa-exchange"></i><span>Add to Compare</span></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="product-content">
                                    <h3><a href="../shop-single.html">Black Earphone</a></h3>
                                    <div class="product-rate">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="far fa-star"></i>
                                    </div>
                                    <div class="d-flex justify-content-between">
                                        <div class="product-price">
                                            <span class="old">$60.00</span>
                                            <span>$100.00</span>
                                        </div>
                                        <button class="product-cart-btn" type="button"><i class="fal fa-shopping-cart"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-4 col-md-6 mb-4">
                            <div class="single-product">
                                <div class="product-img">
                                    <a href="../shop-single.html">
                                        <img class="product-img" src="assets/img/products/p14.png" alt="#">
                                        <span class="out-of-stock">Out Of Stock</span>
                                    </a>
                                    <div class="button-head">
                                        <div class="product-action">
                                            <a data-bs-toggle="modal" data-bs-target="#staticBackdrop" href="#"><i class="far fa-eye"></i><span>Quick Shop</span></a>
                                            <a href="#"><i class="far fa-heart"></i><span>Add to Wishlist</span></a>
                                            <a href="#"><i class="far fa-exchange"></i><span>Add to Compare</span></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="product-content">
                                    <h3><a href="../shop-single.html">Wireless Charger</a></h3>
                                    <div class="product-rate">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="far fa-star"></i>
                                    </div>
                                    <div class="d-flex justify-content-between">
                                        <div class="product-price">
                                            <span class="old">$60.00</span>
                                            <span>$100.00</span>
                                        </div>
                                        <button class="product-cart-btn" type="button"><i class="fal fa-shopping-cart"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <section class="shop-home-list section">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 col-md-6 col-12">
                    <div class="row">
                        <div class="col-12">
                            <div class="shop-section-title">
                                <h1>On sale</h1>
                            </div>
                        </div>
                    </div>
                    <div class="single-list">
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-12">
                                <div class="list-image overlay">
                                    <img src="assets/img/list/1.png" alt="#">
                                    <a href="#" class="buy"><i class="fa fa-shopping-bag"></i></a>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-12 no-padding">
                                <div class="content">
                                    <h4 class="title"><a href="#">Awesome Police Eyeglasses</a></h4>
                                    <div class="product-rate">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="far fa-star"></i>
                                    </div>
                                    <p class="price with-discount">$40</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="single-list">
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-12">
                                <div class="list-image overlay">
                                    <img src="assets/img/list/2.png" alt="#">
                                    <a href="#" class="buy"><i class="fa fa-shopping-bag"></i></a>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-12 no-padding">
                                <div class="content">
                                    <h5 class="title"><a href="#">Awesome Police Eyeglasses</a></h5>
                                    <div class="product-rate">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="far fa-star"></i>
                                    </div>
                                    <p class="price with-discount">$45</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="single-list">
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-12">
                                <div class="list-image overlay">
                                    <img src="assets/img/list/3.png" alt="#">
                                    <a href="#" class="buy"><i class="fa fa-shopping-bag"></i></a>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-12 no-padding">
                                <div class="content">
                                    <h5 class="title"><a href="#">Awesome Police Eyeglasses</a></h5>
                                    <div class="product-rate">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="far fa-star"></i>
                                    </div>
                                    <p class="price with-discount">$82</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-12">
                    <div class="row">
                        <div class="col-12">
                            <div class="shop-section-title">
                                <h1>Best Seller</h1>
                            </div>
                        </div>
                    </div>
                    <div class="single-list">
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-12">
                                <div class="list-image overlay">
                                    <img src="assets/img/list/3.png" alt="#">
                                    <a href="#" class="buy"><i class="fa fa-shopping-bag"></i></a>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-12 no-padding">
                                <div class="content">
                                    <h5 class="title"><a href="#">Awesome Police Eyeglasses</a></h5>
                                    <div class="product-rate">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="far fa-star"></i>
                                    </div>
                                    <p class="price with-discount">$55</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="single-list">
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-12">
                                <div class="list-image overlay">
                                    <img src="assets/img/list/2.png" alt="#">
                                    <a href="#" class="buy"><i class="fa fa-shopping-bag"></i></a>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-12 no-padding">
                                <div class="content">
                                    <h5 class="title"><a href="#">Awesome Police Eyeglasses</a></h5>
                                    <div class="product-rate">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="far fa-star"></i>
                                    </div>
                                    <p class="price with-discount">$25</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="single-list">
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-12">
                                <div class="list-image overlay">
                                    <img src="assets/img/list/1.png" alt="#">
                                    <a href="#" class="buy"><i class="fa fa-shopping-bag"></i></a>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-12 no-padding">
                                <div class="content">
                                    <h5 class="title"><a href="#">Awesome Police Eyeglasses</a></h5>
                                    <div class="product-rate">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="far fa-star"></i>
                                    </div>
                                    <p class="price with-discount">$69</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-12">
                    <div class="row">
                        <div class="col-12">
                            <div class="shop-section-title">
                                <h1>Top viewed</h1>
                            </div>
                        </div>
                    </div>
                    <div class="single-list">
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-12">
                                <div class="list-image overlay">
                                    <img src="assets/img/list/1.png" alt="#">
                                    <a href="#" class="buy"><i class="fa fa-shopping-bag"></i></a>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-12 no-padding">
                                <div class="content">
                                    <h5 class="title"><a href="#">Awesome Police Eyeglasses</a></h5>
                                    <div class="product-rate">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="far fa-star"></i>
                                    </div>
                                    <p class="price with-discount">$15</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="single-list">
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-12">
                                <div class="list-image overlay">
                                    <img src="assets/img/list/2.png" alt="#">
                                    <a href="#" class="buy"><i class="fa fa-shopping-bag"></i></a>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-12 no-padding">
                                <div class="content">
                                    <h5 class="title"><a href="#">Awesome Police Eyeglasses</a></h5>
                                    <div class="product-rate">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="far fa-star"></i>
                                    </div>
                                    <p class="price with-discount">$20</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="single-list">
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-12">
                                <div class="list-image overlay">
                                    <img src="assets/img/list/3.png" alt="#">
                                    <a href="#" class="buy"><i class="fa fa-shopping-bag"></i></a>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-12 no-padding">
                                <div class="content">
                                    <h5 class="title"><a href="#">Awesome Police Eyeglasses</a></h5>
                                    <div class="product-rate">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="far fa-star"></i>
                                    </div>
                                    <p class="price with-discount">$100</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="cown-down">
        <div class="section-inner">
            <div class="container-fluid p-0">
                <div class="row g-0">
                    <div class="col-lg-6 col-12">
                        <div class="image">
                            <img src="assets/img/deal.jpg" alt="#">
                        </div>
                    </div>
                    <div class="col-lg-6 col-12">
                        <div class="content">
                            <div class="heading-block">
                                <p class="small-title">Todays Deal</p>
                                <h3 class="title">Sweater New Trending 2021</h3>
                                <p class="text">There are many variations of passages of lorem ipsum available but the majority have suffered alteration in some form.</p>
                                <h1 class="price">$1000 <s>$1500</s></h1>
                                <div class="coming-time">
                                    <div class="clearfix" data-countdown="2024/12/30"></div>
                                </div>
                                <div class="mt-5">
                                    <a href="#" class="count-buy-btn">Buy Now</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="product-area section">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="section-title d-flex justify-content-between align-center">
                        <div class="d-flex section-title-left">
                            <i class="flaticon-menu"></i>
                            <h2>Top Category</h2>
                        </div>
                        <div class="section-title-right">
                            <a href="#">View More <i class="far fa-long-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-2 col-md-4 mb-4">
                    <a href="#">
                        <div class="single-category">
                            <div class="d-flex">
                                <i class="flaticon-toys"></i>
                                <span>Baby Toys</span>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-2 col-md-4 mb-4">
                    <a href="#">
                        <div class="single-category">
                            <div class="d-flex">
                                <i class="flaticon-dress"></i>
                                <span>Fashion</span>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-2 col-md-4 mb-4">
                    <a href="#">
                        <div class="single-category">
                            <div class="d-flex">
                                <i class="flaticon-laptop"></i>
                                <span>Electronics</span>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-2 col-md-4 mb-4">
                    <a href="#">
                        <div class="single-category">
                            <div class="d-flex">
                                <i class="flaticon-home"></i>
                                <span>Garden</span>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-2 col-md-4 mb-4">
                    <a href="#">
                        <div class="single-category">
                            <div class="d-flex">
                                <i class="flaticon-gift-box"></i>
                                <span>Gifts</span>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-2 col-md-4 mb-4">
                    <a href="#">
                        <div class="single-category">
                            <div class="d-flex">
                                <i class="flaticon-beauty"></i>
                                <span>Beauty</span>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-2 col-md-4 mb-4">
                    <a href="#">
                        <div class="single-category">
                            <div class="d-flex">
                                <i class="flaticon-music-notes"></i>
                                <span>Music</span>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-2 col-md-4 mb-4">
                    <a href="#">
                        <div class="single-category">
                            <div class="d-flex">
                                <i class="flaticon-groceries"></i>
                                <span>Groceries</span>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-2 col-md-4 mb-4">
                    <a href="#">
                        <div class="single-category">
                            <div class="d-flex">
                                <i class="flaticon-bags"></i>
                                <span>Accessories</span>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-2 col-md-4 mb-4">
                    <a href="#">
                        <div class="single-category">
                            <div class="d-flex">
                                <i class="flaticon-shopping-bag"></i>
                                <span>Automotive</span>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-2 col-md-4 mb-4">
                    <a href="#">
                        <div class="single-category">
                            <div class="d-flex">
                                <i class="flaticon-mozy"></i>
                                <span>Furniture</span>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-2 col-md-4 mb-4">
                    <a href="#">
                        <div class="single-category">
                            <div class="d-flex">
                                <i class="flaticon-ellipsis"></i>
                                <span>Pets</span>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="product-area section pt-0">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="section-title d-flex justify-content-between align-center">
                        <div class="d-flex section-title-left">
                            <i class="flaticon-positive"></i>
                            <h2>More Item For You</h2>
                        </div>
                        <div class="section-title-right">
                            <a href="#">View More <i class="far fa-long-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-3 col-md-6 mb-4">
                    <div class="single-product">
                        <div class="product-img">
                            <a href="../shop-single.html">
                                <img class="product-img" src="assets/img/products/p1.png" alt="#">
                                <span class="new">New</span>
                            </a>
                            <div class="button-head">
                                <div class="product-action">
                                    <a data-bs-toggle="modal" data-bs-target="#staticBackdrop" href="#"><i class="far fa-eye"></i><span>Quick Shop</span></a>
                                    <a href="#"><i class="far fa-heart"></i><span>Add to Wishlist</span></a>
                                    <a href="#"><i class="far fa-exchange"></i><span>Add to Compare</span></a>
                                </div>
                            </div>
                        </div>
                        <div class="product-content">
                            <h3><a href="../shop-single.html">Wireless Earphone Collection</a></h3>
                            <div class="product-rate">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                            </div>
                            <div class="d-flex justify-content-between">
                                <div class="product-price">
                                    <span class="old">$60.00</span>
                                    <span>$100.00</span>
                                </div>
                                <button class="product-cart-btn" type="button"><i class="fal fa-shopping-cart"></i></button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6 mb-4">
                    <div class="single-product">
                        <div class="product-img">
                            <a href="../shop-single.html">
                                <img class="product-img" src="assets/img/products/p2.png" alt="#">
                                <span class="new">New</span>
                            </a>
                            <div class="button-head">
                                <div class="product-action">
                                    <a data-bs-toggle="modal" data-bs-target="#staticBackdrop" href="#"><i class="far fa-eye"></i><span>Quick Shop</span></a>
                                    <a href="#"><i class="far fa-heart"></i><span>Add to Wishlist</span></a>
                                    <a href="#"><i class="far fa-exchange"></i><span>Add to Compare</span></a>
                                </div>
                            </div>
                        </div>
                        <div class="product-content">
                            <h3><a href="../shop-single.html">Wireless Earphone Collection</a></h3>
                            <div class="product-rate">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                            </div>
                            <div class="d-flex justify-content-between">
                                <div class="product-price">
                                    <span class="old">$60.00</span>
                                    <span>$100.00</span>
                                </div>
                                <button class="product-cart-btn" type="button"><i class="fal fa-shopping-cart"></i></button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6 mb-4">
                    <div class="single-product">
                        <div class="product-img">
                            <a href="../shop-single.html">
                                <img class="product-img" src="assets/img/products/p3.png" alt="#">
                            </a>
                            <div class="button-head">
                                <div class="product-action">
                                    <a data-bs-toggle="modal" data-bs-target="#staticBackdrop" href="#"><i class="far fa-eye"></i><span>Quick Shop</span></a>
                                    <a href="#"><i class="far fa-heart"></i><span>Add to Wishlist</span></a>
                                    <a href="#"><i class="far fa-exchange"></i><span>Add to Compare</span></a>
                                </div>
                            </div>
                        </div>
                        <div class="product-content">
                            <h3><a href="../shop-single.html">Wireless Earphone Collection</a></h3>
                            <div class="product-rate">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                            </div>
                            <div class="d-flex justify-content-between">
                                <div class="product-price">
                                    <span class="old">$60.00</span>
                                    <span>$100.00</span>
                                </div>
                                <button class="product-cart-btn" type="button"><i class="fal fa-shopping-cart"></i></button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6 mb-4">
                    <div class="single-product">
                        <div class="product-img">
                            <a href="../shop-single.html">
                                <img class="product-img" src="assets/img/products/p4.png" alt="#">
                                <span class="new">New</span>
                            </a>
                            <div class="button-head">
                                <div class="product-action">
                                    <a data-bs-toggle="modal" data-bs-target="#staticBackdrop" href="#"><i class="far fa-eye"></i><span>Quick Shop</span></a>
                                    <a href="#"><i class="far fa-heart"></i><span>Add to Wishlist</span></a>
                                    <a href="#"><i class="far fa-exchange"></i><span>Add to Compare</span></a>
                                </div>
                            </div>
                        </div>
                        <div class="product-content">
                            <h3><a href="../shop-single.html">Wireless Earphone Collection</a></h3>
                            <div class="product-rate">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                            </div>
                            <div class="d-flex justify-content-between">
                                <div class="product-price">
                                    <span class="old">$60.00</span>
                                    <span>$100.00</span>
                                </div>
                                <button class="product-cart-btn" type="button"><i class="fal fa-shopping-cart"></i></button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6 mb-4">
                    <div class="single-product">
                        <div class="product-img">
                            <a href="../shop-single.html">
                                <img class="product-img" src="assets/img/products/p5.png" alt="#">
                            </a>
                            <div class="button-head">
                                <div class="product-action">
                                    <a data-bs-toggle="modal" data-bs-target="#staticBackdrop" href="#"><i class="far fa-eye"></i><span>Quick Shop</span></a>
                                    <a href="#"><i class="far fa-heart"></i><span>Add to Wishlist</span></a>
                                    <a href="#"><i class="far fa-exchange"></i><span>Add to Compare</span></a>
                                </div>
                            </div>
                        </div>
                        <div class="product-content">
                            <h3><a href="../shop-single.html">Wireless Earphone Collection</a></h3>
                            <div class="product-rate">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                            </div>
                            <div class="d-flex justify-content-between">
                                <div class="product-price">
                                    <span class="old">$60.00</span>
                                    <span>$100.00</span>
                                </div>
                                <button class="product-cart-btn" type="button"><i class="fal fa-shopping-cart"></i></button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6 mb-4">
                    <div class="single-product">
                        <div class="product-img">
                            <a href="../shop-single.html">
                                <img class="product-img" src="assets/img/products/p6.png" alt="#">
                                <span class="new">New</span>
                            </a>
                            <div class="button-head">
                                <div class="product-action">
                                    <a data-bs-toggle="modal" data-bs-target="#staticBackdrop" href="#"><i class="far fa-eye"></i><span>Quick Shop</span></a>
                                    <a href="#"><i class="far fa-heart"></i><span>Add to Wishlist</span></a>
                                    <a href="#"><i class="far fa-exchange"></i><span>Add to Compare</span></a>
                                </div>
                            </div>
                        </div>
                        <div class="product-content">
                            <h3><a href="../shop-single.html">Wireless Earphone Collection</a></h3>
                            <div class="product-rate">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                            </div>
                            <div class="d-flex justify-content-between">
                                <div class="product-price">
                                    <span class="old">$60.00</span>
                                    <span>$100.00</span>
                                </div>
                                <button class="product-cart-btn" type="button"><i class="fal fa-shopping-cart"></i></button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6 mb-4">
                    <div class="single-product">
                        <div class="product-img">
                            <a href="../shop-single.html">
                                <img class="product-img" src="assets/img/products/p7.png" alt="#">
                            </a>
                            <div class="button-head">
                                <div class="product-action">
                                    <a data-bs-toggle="modal" data-bs-target="#staticBackdrop" href="#"><i class="far fa-eye"></i><span>Quick Shop</span></a>
                                    <a href="#"><i class="far fa-heart"></i><span>Add to Wishlist</span></a>
                                    <a href="#"><i class="far fa-exchange"></i><span>Add to Compare</span></a>
                                </div>
                            </div>
                        </div>
                        <div class="product-content">
                            <h3><a href="../shop-single.html">Wireless Earphone Collection</a></h3>
                            <div class="product-rate">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                            </div>
                            <div class="d-flex justify-content-between">
                                <div class="product-price">
                                    <span class="old">$60.00</span>
                                    <span>$100.00</span>
                                </div>
                                <button class="product-cart-btn" type="button"><i class="fal fa-shopping-cart"></i></button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6 mb-4">
                    <div class="single-product">
                        <div class="product-img">
                            <a href="../shop-single.html">
                                <img class="product-img" src="assets/img/products/p8.png" alt="#">
                            </a>
                            <div class="button-head">
                                <div class="product-action">
                                    <a data-bs-toggle="modal" data-bs-target="#staticBackdrop" href="#"><i class="far fa-eye"></i><span>Quick Shop</span></a>
                                    <a href="#"><i class="far fa-heart"></i><span>Add to Wishlist</span></a>
                                    <a href="#"><i class="far fa-exchange"></i><span>Add to Compare</span></a>
                                </div>
                            </div>
                        </div>
                        <div class="product-content">
                            <h3><a href="../shop-single.html">Wireless Earphone Collection</a></h3>
                            <div class="product-rate">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                            </div>
                            <div class="d-flex justify-content-between">
                                <div class="product-price">
                                    <span class="old">$60.00</span>
                                    <span>$100.00</span>
                                </div>
                                <button class="product-cart-btn" type="button"><i class="fal fa-shopping-cart"></i></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <section class="shop-services section home">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-6 col-12">
                    <div class="single-service">
                        <i class="fal fa-truck"></i>
                        <h4>Free Delivery</h4>
                        <p>Orders over $150</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-12">
                    <div class="single-service">
                        <i class="fal fa-sync"></i>
                        <h4>Get Refund</h4>
                        <p>Within 30 days returns</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-12">
                    <div class="single-service">
                        <i class="fal fa-lock"></i>
                        <h4>Safe Payment</h4>
                        <p>100% secure payment</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-12">
                    <div class="single-service">
                        <i class="fal fa-headset"></i>
                        <h4>24/7 Support</h4>
                        <p>Feel Free To Call us</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="shop-blog section">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="section-title d-flex justify-content-between align-center">
                        <div class="d-flex section-title-left">
                            <i class="fas fa-blog"></i>
                            <h2>Latest News</h2>
                        </div>
                        <div class="section-title-right">
                            <a href="#">View More <i class="far fa-long-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-md-6 col-12">
                    <div class="shop-single-blog">
                        <img src="assets/img/blog/1.jpg" alt="#">
                        <div class="content">
                            <p class="date">30 May, 2021. Sunday</p>
                            <a href="#" class="title">There are many variations available</a>
                            <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
                            <a href="#" class="more-btn">Read More <i class="far fa-long-arrow-right"></i> </a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-12">
                    <div class="shop-single-blog">
                        <img src="assets/img/blog/2.jpg" alt="#">
                        <div class="content">
                            <p class="date">30 May, 2021. Sunday</p>
                            <a href="#" class="title">There are many variations available</a>
                            <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
                            <a href="#" class="more-btn">Read More <i class="far fa-long-arrow-right"></i> </a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-12">
                    <div class="shop-single-blog">
                        <img src="assets/img/blog/3.jpg" alt="#">
                        <div class="content">
                            <p class="date">30 May, 2021. Sunday</p>
                            <a href="#" class="title">There are many variations available</a>
                            <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
                            <a href="#" class="more-btn">Read More <i class="far fa-long-arrow-right"></i> </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="shop-newsletter py-5">
        <div class="container">
            <div class="inner-top">
                <div class="row">
                    <div class="col-lg-8 offset-lg-2 col-12">
                        <div class="inner">
                            <h4>Newsletter</h4>
                            <p> Subscribe to our newsletter and get <span>30%</span> off your first purchase</p>
                            <form action="#" method="get" class="newsletter-inner">
                                <input name="email" placeholder="Your email address" required="" type="email">
                                <button class="btn">Subscribe <i class="fal fa-paper-plane"></i></button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}

{% block footer %}
    <footer class="footer">
        <div class="footer-top section">
            <div class="container">
                <div class="row">
                    <div class="col-lg-5 col-md-6 col-12">
                        <div class="single-footer about">
                            <div class="logo">
                                <a href="{% url 'task_market:index' %}"><img width="250" src="{% static 'temp_shop/assets/img/logo-white.png' %}" alt="#"></a>
                            </div>
                            <p class="text">We are many variations of passages available but the majority have suffered alteration in some form by the andomised words which injected humour.</p>
                            <p class="call">Have Any Question? Call Us<span>(+86) 158 3720 4509</span></p>
                        </div>
                    </div>
                    <div class="col-lg-2 col-md-6 col-12">
                        <div class="single-footer links">
                            <h4>Information</h4>
                            <ul>
                                <li><a href="#">About Us</a></li>
                                <li><a href="#">Contact Us</a></li>
                                <li><a href="#">Terms & Conditions</a></li>
                                <li><a href="#">Faq</a></li>
                                <li><a href="#">Careers</a></li>
                                <li><a href="#">Our Stores</a></li>
                                <li><a href="#">Our Cares</a></li>
                                <li><a href="#">Help</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-2 col-md-6 col-12">
                        <div class="single-footer links">
                            <h4>Customer Service</h4>
                            <ul>
                                <li><a href="#">Payment Methods</a></li>
                                <li><a href="#">Money-back</a></li>
                                <li><a href="#">Returns</a></li>
                                <li><a href="#">Shipping</a></li>
                                <li><a href="#">Privacy Policy</a></li>
                                <li><a href="#">Support Center</a></li>
                                <li><a href="#">How to Buy</a></li>
                                <li><a href="#">Track Your Order</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 col-12">
                        <div class="single-footer social">
                            <h4>Get In Tuch</h4>
                            <div class="contact">
                                <ul>
                                    <li> <i class="fal fa-map-marker-alt"></i> 1503 Kovar Road, New York, USA</li>
                                    <li> <i class="fal fa-envelope"></i> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4f3c2e232a3c0f2a372e223f232a612c2022">[email&#160;protected]</a></li>
                                    <li> <i class="fal fa-phone"></i> (+1) 123 456 5657</li>
                                </ul>
                            </div>
                            <ul>
                                <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                                <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                                <li><a href="#"><i class="fab fa-whatsapp"></i></a></li>
                                <li><a href="#"><i class="fab fa-instagram"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="copyright">
            <div class="container">
                <div class="inner">
                    <div class="row">
                        <div class="col-lg-6 col-12">
                            <div class="left">
                                <p>Copyright © 2023 By <a href="http://www.bootstrapmb.com/">一起发财</a> - All Rights Reserved.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>
{% endblock %}

{% block view %}
    <div class="modal" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdrop" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
                            <img src="assets/img/products/p1.png" alt="#">
                        </div>
                        <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
                            <div class="quickview-content">
                                <h2>Xbeats Bluetooth Earphones</h2>
                                <div class="d-flex mb-3">
                                    <span>Brand:</span>
                                    <b>Xbeats</b>
                                </div>
                                <div class="d-flex mb-3">
                                    <span>Category:</span>
                                    <b>Headphones</b>
                                </div>
                                <div class="d-flex mb-3">
                                    <span>Tated:</span>
                                    <div class="quickview-ratting-review">
                                        <div class="quickview-ratting-wrap">
                                            <div class="quickview-ratting">
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fal fa-star"></i>
                                                <a href="#"> (50)</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <h3>$29.00</h3>
                                <div class="quickview-stock">
                                    <span><i class="fa fa-check-circle-o"></i> Stock Available</span>
                                </div>
                                <div class="add-to-cart">
                                    <a href="#" class="btn">Add to cart</a>
                                </div>
                                <div class="default-social">
                                    <h4 class="share-now">Share:</h4>
                                    <ul>
                                        <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                                        <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                                        <li><a href="#"><i class="fab fa-pinterest-p"></i></a></li>
                                        <li><a href="#"><i class="fab fa-instagram"></i></a></li>
                                        <li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

<script src="{% static 'assets/js/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'assets/js/jquery-ui.min.js' %}"></script>
<script src="{% static 'assets/js/bootstrap.bundle.min.js' %}"></script>
<script src="{% static 'assets/js/slicknav.min.js' %}"></script>
<script src="{% static 'assets/js/owl-carousel.js' %}"></script>
<script src="{% static 'assets/js/magnific-popup.js' %}"></script>
<script src="{% static 'assets/js/facnybox.min.js' %}"></script>
<script src="{% static 'assets/js/waypoints.min.js' %}"></script>
<script src="{% static 'assets/js/finalcountdown.min.js' %}"></script>
<script src="{% static 'assets/js/nicesellect.js' %}"></script>
<script src="{% static 'assets/js/ytplayer.min.js' %}"></script>
<script src="{% static 'assets/js/flex-slider.js' %}"></script>
<script src="{% static 'assets/js/scrollup.js' %}"></script>
<script src="{% static 'assets/js/onepage-nav.min.js' %}"></script>
<script src="{% static 'assets/js/easing.js' %}"></script>
<script src="{% static 'assets/js/main.js' %}"></script>

</body>
</html>